The shotgun surgery problem

This scenario is the famous “shotgun surgery” smell we see in many places (not particularly in React applications). This essentially says that we'll have to touch several modules whenever we need to modify the code for either a bug fixing or adding a new feature. And indeed, it’s easier to make mistakes with this many changes, especially when your tests are insufficient.

---

このシナリオは、（特にReactアプリケーションに限ったことではないが）多くの場所で見かける有名な「ショットガン・サージェリー」の臭いだ。これは基本的に、バグ修正や新機能追加のためにコードを修正する必要があるときは、必ず複数のモジュールを触らなければならないことを意味する。そして実際、特にテストが不十分な場合、これほど多くの変更でミスを犯しやすくなる。

https://scrapbox.io/files/649dfa55daac4a001cd22209.png

As illustrated above, the coloured lines indicate branches of country code checks that cross many files. In views, we’ll need to do separate things for different country code, while in hooks, we’ll need similar branches. And whenever we need to add a new country code, we’ll have to touch all these parts.

For example, if we consider Denmark as a new country the business is expanding to, we’ll end up with code in many places like:

---

上の図のように、色のついた線は、多くのファイルにまたがる国コードチェックの分岐を示しています。ビューでは、国コードごとに別々のことをする必要があり、フックでは同じような分岐が必要になる。そして、新しい国コードを追加する必要があるときはいつでも、これらの部分をすべて触らなければならない。

例えば、デンマークを事業展開する新しい国として考えた場合、以下のようなコードが多くの場所に存在することになる：

One possible solution for the problem of having branches scattered in different places is to use polymorphism to replace these switch cases or table look-up logic. We can use Extract Class on those properties and then Replace Conditional with Polymorphism.

--

ブランチがさまざまな場所に散らばっている問題の解決策の1つとして、ポリモーフィズムを使ってこれらのスイッチ・ケースやテーブル・ルックアップ・ロジックを置き換えることが考えられます。これらのプロパティでExtract Classを使用し、条件分岐をポリモーフィズムで置き換えることができます。